<template>
  <div class="my" >
    <van-nav-bar>
      <template #left>
        <div class="left-con">
          <div class="logo">
            <img src="../assets/imgs/网易云.jpg" class="auto-img" alt="" />
          </div>
          <div class="logoText">Netease cloud music</div>
        </div>
      </template>
      <template v-slot:right>
        <div class="right-text">首页</div>
      </template>
    </van-nav-bar>
    <div class="loginBox">
      <div>
        <div>
          <div class="comeback">welcome back !</div>
          <div class="pl-account">Please login to your accounts</div>
        </div>
      </div>
    </div>

    <div class="enter">
      <van-form @submit="Regist">
        <van-field
          v-model="isUserData.phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{pattern:phoneReg,message: '手机号格式不正确'},{ required: true,  message: '请填写手机号' }]" autocomplete = "off" 
          
        />
        <van-field
          v-model="isUserData.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码(6-16位)"
          :rules="[{pattern:passwordId,message: '字母及下划线组合'},{ required: true, message: '请填写密码' }]" autocomplete = "off"
          right-icon="closed-eye"
        />

        <div class="forget">
          <div class="forgetPass">忘记密码?</div>
        </div>
        <!-- 登录 -->
        <div class="loginInfo">
          <van-button @click="tohome()" round block color="#dd3131" native-type="submit"
            >登录</van-button>
        
        </div>
        <div class="newlogin">
          <van-button round block type="default" native-type="button"
           @click="showRegist" >注册</van-button>
        </div>
      </van-form>
    </div>

    <!-- 注册 -->
    <van-popup  v-model="ifShow" closeable position="bottom">
      <div class="registertext">
        <div class="zc-title">注册</div>
        <div class="zc-bigbox">
          <div class="enter">
            <van-form @submit="Regist">
              <van-field
                v-model="isUserRiglist.phone"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[{pattern:phoneReg,message: '手机号格式不正确'},{ required: true, message: '请填写手机号' }]" autocomplete = "off"
              />
              <van-field
                v-model="isUserRiglist.password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码(6-16位)"
                :rules="[{pattern:passwordId,message: '字母及下划线组合'},{ required: true, message: '请填写密码' }]" autocomplete = "off"
                right-icon="closed-eye"
              />

              <van-field
                v-model="isUserRiglist.nickName"
                name="nickName"
                label="昵称"
                placeholder="昵称(1-16位)"
                :rules="[{pattern:nackNameReg,message: '可由中英文组合'},{ required: true, message: '请填写昵称' }]" autocomplete = "off"
                aria-aria-autocomplete="off"
              />

              <div class="regis-info">
                <van-button round block color="#dd3131" native-type="submit"
                  >注册</van-button
                >
              </div>
            </van-form>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- <div class="thefoot">
      <div class="login">
        <div class="loginTop">欢迎登录</div>
        <div class="loginContent">
          <input
            type="text"
            name="phone"
            class="phone"
            placeholder="请输入手机号码"
            v-model="phone"
           
          />
          <input
            type="text"
            name="passworld"
            class="passWorld"
            placeholder="请输入密码"
            v-model="password"
          />
          <button class="btn" @click="Login">登录</button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      // 用户注册数据
      userdata:[],

      //登录数据
      isUserData: {
        phone: "",
        password: "",
      },
      //注册的数据
      isUserRiglist: {
        phone: "",
        password: "",
        nickName: "",
      },
      denglu: [],
      //是否显示注册弹窗
      ifShow: false,

      //手机正则表达式
      phoneReg:/^1[3-9]\d{9}$/,
      //密码的正则表达式(首字符为字母，可以由字母下划线组合[6-16位])
      passwordId: /^[A-Za-z]\w{5,15}$/,

      //昵称正则表达式(中英文组合1-16)
      nackNameReg:/^[A-Za-z\u4e00-\u9fa5]{1,16}$/
    };
  },
  created() {
    // this.getSingSwpier()
  },
  methods: {
    Login: function () {
      this.$store.dispatch("getLogin", {
        phone: this.phone,
        password: this.password,
      });
      // this.getSingSwpier({phone:this.phone, password:this.password })
      // this.$store.dispatch('getSingSwpier',{phone:this.phone, password:this.password})
    },
    // getSingSwpier(data){
    //   this.axios({
    //     method:"get",
    //     url:`/login/cellphone?phone=${data.phone}&password=${data.password}`,

    //   }).then(res => {
    //     console.log("res==>",res);
    //     this.denglu = res.data
    //     console.log("this.denglu==>",this.denglu);
    //   }).catch(err => {
    //     console.log("err==>",err);
    //   })
    // },

    // getLogin:async function (context,value) {
    //   let res = await getSingSwpier(value);
    //   console.log("登录页面的rres",res);
    //  }

    getPhoneLogin(data) {
      this.axios({
        method: "post",
        url: `/login/cellphone?phone=${data.phone}&password=${data.password}`,
      });
    },

    //显示注册弹窗
    showRegist(){
      this.ifShow = true
    },



    //注册
    Regist(data){

      // this.$store.dispatch('getLogin',{phone:this.phone,password:this.password})

      //  console.log(data);
       this.axios({
        method: "post",
        url: `/login/cellphone?phone=${data.phone}&password=${data.password}`,
       params:{
        username:this.phone,password:this.password
       },
        
        //data参数
        data:{
          ...data
        }
      }).then(res =>{
        console.log('res===========>',res);
        if(res.data.code === 400){
          this.isUserData={
            phone:data.phone,
            password:data.password,
      
            nickName:data.nickName
          }
          this.token =  this.isUserData
          window.localStorage.setItem('token',JSON.stringify(this.isUserData))

          console.log('我是用户数据===》',this.userdata);
        }
        
      }).catch(err=>{
        console.log("err==>",err);
      }) ;
    },

    tohome(){
      this.$router.push({name:'Find'})

      // if (!window.localStorage) {
      // this.$router.push({name:'Find'})
        
      // }else{
      //   console.log('我还没注册呢！！！');
      // }

    }
  },
};
</script>

<style lang="less" scoped>
.my {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  .registertext {
    .regis-info {
      margin: 30px 20px 50px;
    }
    .zc-bigbox {
      margin-top: 15px 0;
    }
    padding: 20px;
    .zc-title {
      font-size: 18px;
      padding-left: 15px;
      line-height: 20px;
    }
  }
  .enter {
    margin-top: 40px;
    .forget {
      display: flex;
      margin-top: 20px;
      .forgetPass {
        margin-left: auto;
        color: #666;
        padding-right: 20px;
      }
    }
    .loginInfo {
      margin: 20px 0 20px 0;

      padding: 20px;
    }
    .newlogin{
      padding: 0px 20px;
    }
  }
  .loginBox {
    padding: 15px;
    margin-top: 80px;
    .comeback {
      font-size: 24px;
      color: #dd3131;
    }
    .pl-account {
      font-size: 16px;
      color: #999;
      margin-top: 20px;
    }
  }
  .left-con {
    display: flex;
    align-items: center;
    .logo {
      width: 36px;
      height: 36px;
      margin-right: 10px;
      border-radius: 50%;
      overflow: hidden;
    }
    .logoText {
      color: #444;
      font-size: bold;
    }
  }
  .right-text {
    color: #ff3a3a;
  }
  .loginBox {
    padding: 15px;
  }
}

// .login {
//   width: 100%;
//   height: 667px;

//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   background-color: rgb(183, 79, 79);
//   .loginTop {
//     margin-top: 50px;
//     font-size: 50px;
//     color: #fff;
//   }
//   .loginContent{
//     width: 100%;
//     height: 300px;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: space-around;
//     margin-top: 100px;
//     .phone,
//     .passWorld{
//       width: 250px;
//       height: 50px;
//       border: 1px solid #999;
//     }
//     .btn{
//         width: 100px;
//         height: 30px;
//     }
//  }
// }
</style>
